<!-- 客户树 -->
<template>
  <el-card shadow="never">
    <!-- <el-input v-model="deptName" placeholder="客户类别" clearable>
      <template #prefix>
        <i-ep-search />
      </template>
    </el-input> -->
    <text>客户</text>
    <el-tree
      ref="deptTreeRef"
      class="mt-2"
      :data="deptList"
      :expand-on-click-node="false"
      :filter-node-method="handleFilter"
      default-expand-all
      @node-click="handleNodeClick"
    >
      <template #default="{ data }">
        <span class="custom-tree-node">
          <span>
            {{ data.clientName }} &nbsp;&nbsp; —— &nbsp;&nbsp;{{
              data.lawyerName
            }}
          </span>
        </span>
      </template>
    </el-tree>
  </el-card>
</template>

<script setup lang="ts">
import sessionAPI, { SessionQuery } from "@/api/session";
const props = defineProps({
  modelValue: {
    type: [String],
    default: "",
  },
});
/** 客户查询参数  */
const queryParams = reactive<SessionQuery>({
  lawyerId: undefined,
  current: 1,
  pageSize: 10,
  clientId: "",
  status: "",
});
const deptList = ref<any>([]); // 客户列表
const deptTreeRef = ref(ElTree); // 客户树
const deptName = ref(); // 客户名称

const emits = defineEmits(["node-click"]);

const deptId = useVModel(props, "modelValue", emits);

watchEffect(
  () => {
    deptTreeRef.value.filter(deptName.value);
  },
  {
    flush: "post", // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
  }
);

/** 客户筛选 */
function handleFilter(value: string, data: any) {
  if (!value) {
    return true;
  }
  return data.label.indexOf(value) !== -1;
}

/** 客户树节点 Click */
function handleNodeClick(data: { [key: string]: any }) {
  console.log(data, "客户筛选");
  if (data.children) {
    return false;
  }
  deptId.value = data.id;
  emits("node-click");
}

onBeforeMount(async () => {
  let userId = localStorage.getItem("userId");
  if (userId) {
    queryParams.lawyerId = Number(userId);
  }
  await sessionAPI.getSession(queryParams).then((data) => {
    deptList.value = data.records;
  });
  deptId.value = deptList.value[0].id;
  emits("node-click");
});
</script>
